import QtQuick 2.0

import SceneGraphRendering 1.0

Rectangle {
    id: rectMainWindow
    width: 360
    height: 360
    color: "black"   

    Rectangle {
        id: rectPalettes
        width: rectMainWindow.width
        height: 84
        anchors.top: rectMainWindow.top
        border.width: 2
        border.color: "#808080"
        anchors.left: rectMainWindow.left
        property list<Item> it

        gradient: Gradient {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 0.33; color: "black" }
        }

        ListView {
            id: lvObjPalette
            width: parent.width //- imgLeft.width - imgRight.width
            height: 80
            anchors.topMargin: 3
            orientation: "Horizontal"
            anchors.top: parent.top
            anchors.left: parent.left
            focus: true
            spacing: 10
            leftMargin: 10
            rightMargin: 35
            topMargin: 20
            highlightMoveVelocity: 70
            visible: model.status === ListModel.Ready
            highlightMoveDuration: 5
           // clip: true

            property int iconWidth: 74
            property int itemSpacing: (iconWidth + spacing)

            model: model
            delegate: Component {

                Rectangle {
                    id: rectObjectIcon
                    width: lvObjPalette.iconWidth
                    height: 76
                    border.width: 2
                    border.color: "#808080"

                    Image {
                        source: file
                        anchors.verticalCenter: parent.verticalCenter
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: txtStatusBar.text = "Clicked " + name
                        onEntered: {
                            txtStatusBar.text = "Pick a " + name
                            rectObjectIcon.border.color = "#000000"

                        }

                        onExited: {
                            rectObjectIcon.border.color = "#808080"
                        }
                    }
                }

            }            
        }

        Image {
            id: imgLeft
            source: "qrc:/images/left.png"
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            rotation: 0
        }

        MouseArea {
            anchors.left: imgLeft.left
            anchors.fill: imgLeft
            hoverEnabled: true
            //onClicked: txtStatusBar.text = "Clicked left button"
            onEntered: {
                imgLeft.scale = 1.2
            }

            onExited: {
                imgLeft.scale = 1.0
            }

            onClicked: {
                console.log("<<< moving left");

                var firstVisibleItem = Math.round((lvObjPalette.visibleArea.xPosition *
                                   lvObjPalette.contentWidth)/lvObjPalette.itemSpacing);

                console.log("firstVisibleItem :", firstVisibleItem);


                //lvObjPalette.positionViewAtIndex(firstVisibleItem - 1, ListView.Center)

                lvObjPalette.currentIndex = firstVisibleItem - 1;

            }

        }

        Image {
            id: imgRight
            source: "qrc:/images/left.png"
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            rotation: 180
        }

        MouseArea {
            anchors.left: imgRight.left
            anchors.fill: imgRight
            hoverEnabled: true

            onEntered: {
                imgRight.scale = 1.2
            }

            onExited: {
                imgRight.scale = 1.0
            }

            onClicked: {
                console.log("moving right >>>");

                var lastVisibleItem = Math.round(((lvObjPalette.visibleArea.xPosition +
                                   lvObjPalette.visibleArea.widthRatio) *
                                   lvObjPalette.contentWidth)/lvObjPalette.itemSpacing);

                console.log("lastVisibleItem :", lastVisibleItem);

                //lvObjPalette.positionViewAtIndex(lastVisibleItem + 1, ListView.Visible)
                lvObjPalette.currentIndex = lastVisibleItem + 1;

            }
        }
    }

    Rectangle {
        id: rectSimViewer
        width: rectMainWindow.width
        height: rectMainWindow.height - rectPalettes.height - rectControls.height
        color: "#808080"
        anchors.left: rectMainWindow.left
        anchors.leftMargin: 0
        anchors.top: rectPalettes.bottom
        anchors.topMargin: 0        

        Renderer {
            id: renderer
            anchors.fill: parent
            //anchors.margins: 10

            // The transform is just to show something interesting..
            transform: [
                Rotation { id: rotation; axis.x: 0; axis.z: 0; axis.y: 1; angle: 0; origin.x: renderer.width / 2; origin.y: renderer.height / 2; },
                Translate { id: txOut; x: -renderer.width / 2; y: -renderer.height / 2 },
                Scale { id: scale; },
                Translate { id: txIn; x: renderer.width / 2; y: renderer.height / 2 }
            ]
        }

    }

    Rectangle {
        id: rectControls
        height: 80
        width: rectMainWindow.width
        color: "#333333"
        anchors.left: rectMainWindow.left
        anchors.leftMargin: 0
        anchors.bottom: rectStatusBar.top
        anchors.bottomMargin: 0

        signal qmlSignal(var anObject)


        Image {
            id: imgPlay
            x: 205
            y: 8
            width: 64
            height: 64
            source: "qrc:/images/play.png"
        }

        MouseArea {
            anchors.left: imgPlay.left
            anchors.fill: imgPlay
            hoverEnabled: true

            onEntered: {
                imgPlay.scale = 1.2
            }

            onExited: {
                imgPlay.scale = 1.0
            }

            onClicked: {
                console.log("Playing sim...");
                //rectControls.qmlSignal("Hallo");
                renderer.play = true;
            }
        }

        Image {
            id: imgPause
            x: 88
            y: 8
            width: 64
            height: 64
            source: "qrc:/images/pause.png"
        }

        MouseArea {
            anchors.left: imgPause.left
            anchors.fill: imgPause
            hoverEnabled: true

            onEntered: {
                imgPause.scale = 1.2
            }

            onExited: {
                imgPause.scale = 1.0
            }

            onClicked: {
                console.log("Pausing sim...");

            }
        }


    }

    Rectangle {
        id: rectStatusBar
        width: rectMainWindow.width
        height: 15
        color: "#ffffff"
        anchors.left: rectMainWindow.left
        anchors.leftMargin: 0
        anchors.bottom: rectMainWindow.bottom
        anchors.bottomMargin: 0

        Text {
            id: txtStatusBar
            text: qsTr("Working...")
            anchors.leftMargin: 4
            anchors.verticalCenter: parent.verticalCenter
            anchors.fill: parent
            color: "#000000"
            font.pixelSize: 12
        }
    }


    ListModel {
        id: model
        ListElement {
            name: "incline"
            file: "qrc:/images/a.png"
        }
        ListElement {
            name: "sphere"
            file: "qrc:/images/b.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/c.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/d.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/e.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/f.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/g.png"
        }
        ListElement {
            name: "incline"
            file: "qrc:/images/h.png"
        }
        ListElement {
            name: "sphere"
            file: "qrc:/images/i.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/j.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/a.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/b.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/c.png"
        }
        ListElement {
            name: "cube"
            file: "qrc:/images/d.png"
        }
    }

}
